<template>
  <a-drawer title="打印报告" :width="1200" :visible="visible1" :body-style="{ paddingBottom: '80px' }" @close="onClose">
    <div style="float: left; width: 70%">
      <div class="burr_f-haibao" v-if="count == 0">
        <img style="z-index: 100; width: 100%; height: 100%" :src="posterImg" />
      </div>
      <div class="burr_f-haibao" v-if="count == 1">
        <img style="z-index: 100; width: 100%; height: 100%" :src="posterImg" />
      </div>
      <div class="burr_f-haibao" v-if="count == 2">
        <img style="z-index: 100; width: 100%; height: 100%" :src="posterImg" />
      </div>
    </div>
    <div style="float: left; width: 30%; positon: relative">
      <a-form :form="form" layout="vertical" hide-required-mark style="margin-left: 50px; margin-bottom: 0">
        <a-row>
          <a-col :span="12">
            <a-form-item label="目标打印机">
              <a-select default-value="1">
                <a-select-option value="1"> 请选择 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="页面" style="postion: absolute; top: -80px">
              <a-select default-value="1">
                <a-select-option value="1"> 全部 </a-select-option>
                <a-select-option value="2"> 自定义 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="布局" style="postion: absolute; top: -160px">
              <a-select default-value="1">
                <a-select-option value="1"> 纵向 </a-select-option>
                <a-select-option value="2"> 横向 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="彩色" style="postion: absolute; top: -230px">
              <a-select default-value="1">
                <a-select-option value="1"> 彩色 </a-select-option>
                <a-select-option value="2">黑白色</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button :style="{ marginRight: '8px' }" @click="onClose"> 取消 </a-button>
      <a-button type="primary" @click="onClose"> 打印 </a-button>
    </div>
  </a-drawer>
</template>

<script>
export default {
  name: 'PrintReport',
  data() {
    return {
      visible1: false,
      count: 0
    }
  },
  created() {},
  methods: {
    showDrawer() {
      this.count = 0
      let that = this
      let domObj = document.getElementById('posterHtml')
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector('#posterHtml')
          e.style.display = 'block'
        }
      }).then(canvas => {
        that.posterImg = canvas.toDataURL('image/png')
      })
      this.visible1 = true
    },
    onClose() {
      this.visible1 = false
      this.posterImg = require('../../../../assets/spin.gif')
      this.$emit('close')
    }
  }
}
</script>

<style></style>
